import React from 'react';
import Link from 'next/link';

function Header() {
    return (
        <header className="text-gray-600 body-font" >
            <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
                <Link href="/" className="cursor-pointer flex cursor title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                    <span className="ml-3 text-xl">Frontend Web</span>
                </Link>
                <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
                    <ul className="flex">

                        <li className="mr-5 hover:text-gray-900">
                            <Link href='/'>
                                Home
                            </Link>
                        </li>

                        <li className="mr-5 hover:text-gray-900">
                            <Link href='/about'>
                                About us
                            </Link>
                        </li>

                        <li className="mr-5 hover:text-gray-900">
                            <Link href='/contact'>
                                Contact
                            </Link>
                        </li>

                    </ul>
                </nav>
            </div>
        </header>



    );
}

export default Header;

import React from 'react';
import Link from 'next/link';
function Footer() {
    return (
        <footer className="flex flex-col items-center justify-between p-6 bg-white dark:bg-gray-900 sm:flex-row mt-8 pt-4">
            <Link href="/" 
            className="text-xl font-bold text-gray-600 transition-colors duration-300 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Frontend Web</Link>

            <p className="text-sm text-gray-600 dark:text-gray-300">© Copyright 2021. All Rights Reserved.</p>

            <div className="flex -mx-2 py-2">

                <Link target="_blank" href="https://www.facebook.com/officialrajdeepsingh" className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" aria-label="Facebook">
                    <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
                        </path>
                    </svg>
                </Link>

                <Link target="_blank" href="https://twitter.com/Official_R_deep" className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" aria-label="Github">
                    <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
                        </path>
                    </svg>
                </Link>

            </div>

        </footer>
    );
}

export default Footer;

import Link from 'next/link';
import React from 'react';

function ReadingHeader() {
    return (
        <header className="text-gray-600 body-font py-4 w-full top-0  bg-gray-500" >
            <div className="container content-center mx-auto flex py-3 px-2 flex-row ">
                <Link href="/" className="cursor-pointer cursor title-font font-medium text-gray-200 mb-4 md:mb-0">
                    <span className="text-xl">
                        <svg className='w-8 h-8' xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 25 25"><path fill="#232326"
                                d="M24 12.001H2.914l5.294-5.295-.707-.707L1 12.501l6.5 6.5.707-.707-5.293-5.293H24v-1z"
                                data-name="Left" /></svg>
                    </span>
                </Link>

                <span className="cursor-pointer cursor title-font font-medium text-gray-200 mb-4 md:mb-0 ml-3 text-xl">Understand The Android Features Before You Regret</span>

            </div>
        </header>



    );
}

export default ReadingHeader;

2. Master Layouts

import React from 'react';
import Footer from './Footer';
import Header from './Header';

function Layout({ children }: any) {
    return (
        <>
            <Header />
            {children}
            <Footer />
        </>
    );
}

export default Layout;

import React from 'react';
import Footer from './Footer';
import ReadingHeader from '@/components/ReadingHeader';

function ReadingLayout({ children }: any) {
    return (
        <div>
            <ReadingHeader />
              {children}
            <Footer />
        </div>
    );
}

export default ReadingLayout;

3. Modify the app layout

pages/_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

4. Page layouts

import type { ReactElement } from 'react'

//  Import the layout
import Layout from '@/components/Layout'


const Page = () => {
  return  <article className="format dark:format-invert mt-4 mx-auto">

  <h1>About us</h1>
  <p className="lead">Lorem excepteur dolore ex veniam ad velit officia enim velit consequat consequat nulla eiusmod</p>

  <h2>My story</h2>
  <p>While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:</p>
  <ol>
      <li><strong>Usability testing</strong>. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live;</li>
      <li><strong>Involving stakeholders</strong>. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;</li>
      <li><strong>Impressing a client</strong>. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;</li>
      <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
  </ol>

</article>

}

Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default Page

import React from 'react';
import type { ReactElement } from 'react'

//  Import the reading layout
import ReadingLayout from '@/components/ReadingLayout';

function read() {
    return ( <article className="format dark:format-invert mt-16 mx-auto">

                <h1>Understand The Android Features Before You Regret.</h1>
                <p className="lead">Lorem excepteur dolore ex veniam ad velit officia enim velit consequat consequat nulla eiusmod</p>
                <time className="mt-2" >
                    November 8th, 2022
                </time>

                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, omnis accusantium! Hic ipsa repudiandae, quibusdam autem dolor earum labore vero voluptatem! Quaerat aliquam pariatur ex cumque sint quas ad rerum.
                </p>
                <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quae culpa corporis quia ipsa saepe magni recusandae nihil impedit assumenda? Porro veniam consequatur adipisci, iure delectus cupiditate illo voluptate magni error aliquid vitae repudiandae, eligendi itaque, id explicabo corporis! Iusto vel minima, quam adipisci corporis incidunt. Saepe animi eaque natus vel provident velit autem officiis tenetur, eos fugit neque quia at ut odit iusto ea explicabo, totam blanditiis. Cum suscipit corporis in quae vel possimus eaque dolorum necessitatibus amet alias corrupti id, perspiciatis laudantium, numquam, iure fugiat. Laudantium rem id ipsam? Ipsa earum mollitia enim corporis pariatur repellendus magni numquam.</p>

                <p>Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.</p>
                <p>But then I found a <a href="#">component library based on Tailwind CSS called Flowbite</a>. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.</p>

                <h2>When does design come in handy?</h2>
                <p>While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:</p>
                <ol>
                    <li><strong>Usability testing</strong>. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live;</li>
                    <li><strong>Involving stakeholders</strong>. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;</li>
                    <li><strong>Impressing a client</strong>. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;</li>
                    <li><strong>Communicating your vision</strong>. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.</li>
                </ol>

            </article>

    );
}

export default read;

read.getLayout = function getLayout(page: ReactElement) {
    return (
        <ReadingLayout>
            {page}
        </ReadingLayout>
    )
}